<template>
	<ul class="todo-list">
		<!-- completed: 完成的类名 -->
		<li :class="{completed:item.done}" v-for=" item in list" :key="item.id">
			<div class="view">
				<input class="toggle" type="checkbox" :checked="item.done" @change="changeFn(item.id)"/>
				<label>{{ item.name }}</label>
				<button class="destroy" @click="del(item.id)"></button>
			</div>
		</li>
	</ul>

</template>

<script>
// 导入mapState(mapState是Vuex中的一个函数)
import {  mapGetters, mapState } from 'vuex';

	export default {
		data(){
			return{

			}
		},
		computed:{
			// 更改变量名
			...mapGetters({
				list:'showList',
			})
		},
		// 采用数组形式引入state属性，提供给本组件使用
		// computed:mapState(['list']),
		methods:{
			changeFn(id){
				this.$store.commit('changeDone',id)
			},
			del(id){
				this.$store.commit('del',id)
			}
		}
	}
</script>
